﻿@using WebApp.Controllers
@using WebApp.Extensions
@model Dto.ApiResponses.MemberResponses.MemberDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.MemberShowPageSetting;
}

@{ var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Member_Show_" + Model.Detail.Id; }

@section Scripts{
    <script type="text/javascript">
        require(['Member/Show', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

@section QuickLinks{
    <a class="btn btn-primary btn-lg" href="@(Url.Action<MemberController>(x => x.Edit(Guid.Empty), new { id = Model.Detail.Id }))">Edit</a>
    <!-- Button trigger modal -->
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Personal Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div>
                                <label>Photo</label>
                                <div>
                                    <canvas id="imgCanvas" width="150" height="187"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Name</label>
                            <div class="text-info" data-bind="text : name"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Date of Birth</label>
                            <div class="text-info" data-bind="text : dateOfBirth"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Address</label>
                            <div class="text-info" data-bind="text : address"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Email</label>
                            <div class="text-info" data-bind="text : email"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Mobile</label>
                            <div class="text-info" data-bind="text : mobile"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Auth Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Tag Id</label>
                            <div class="text-info" data-bind="text : tagId"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Code</label>
                            <div class="text-info" data-bind="text : code"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Valid From</label>
                            <div class="text-info" data-bind="text : validFrom"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Valid To</label>
                            <div class="text-info" data-bind="text : validTo"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Block</label>
                            <div class="text-info" data-bind="text : block"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Role</label>
                            <div class="text-info" data-bind="text : roleName"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>User Status</label>
                            <div class="text-info" data-bind="text : userStatusName"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Config Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Send Email</label>
                            <div class="text-info" data-bind="text : sendEmail"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Send Sms</label>
                            <div class="text-info" data-bind="text : sendSms"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Use Print</label>
                            <div class="text-info" data-bind="text : usePrint"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Track Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label>Failed Attempt Count</label>
                            <div data-bind="text:failedAttemptCount"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label>Last Login Time</label>
                            <div data-bind="text:lastLoginTime"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label>Last Password Changed Date</label>
                            <div data-bind="text:lastPasswordChangedDate"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (!Request.IsAjaxRequest())
    {
        Html.RenderPartial("_ShowWithAudit", Model);
    }

</div>